<template>
	<view class="goods-page-wrapper" @touchstart="touchStart">
		<view class="navbar">
			<navbar title="点餐"></navbar>
		</view>
		<view id="page-main" class="page-main">
			<view class="banner" id="banner">
				<u-swiper :list="goodsBanner" height="360rpx" :indicator="true" indicatorMode="dot" :circular="true"
					imgMode="scaleToFill"></u-swiper>
			</view>
			<view class="sticky-content" id="stickyContent" :style="{ height: stickyContentHieght }">
				<view class="sticky-tabs search-wrap">
					<u-search class="search-box" placeholder="请输入菜品名称" height="60rpx" margin="0 40rpx" shape="round"
						:showAction="false" searchIconSize="40" :disabled="true" @click="goSearchPage"></u-search>
				</view>
				<view class="goods-wrapper" id="goodsWrapper" :style="{ 'padding-bottom': cartHeight + 'px' }">
					<scroll-view class="text-c left-warp" scroll-with-animation :scroll-y="true" :scrollTop="leftScrollTop"
						:style="{ height: '100%' }">
						<view class="tab-left-item" v-for="tab in category" :key="tab.category_no"
							:class="{ active: tab.category_no == tabLeftId, fixedCate: (tab.category_no == '1111' || tab.category_no == '1112' || tab.category_no == '1113' || tab.category_no == '1115') }"
							:id="'tab_' + tab.category_no" @click="tabChange(tab.category_no)">
							<view class="tab-content">
								{{ tab.category_name.slice(0, 8) }}
							</view>
						</view>
					</scroll-view>
					<view class="main-foods-box">
						<food-good-list class="good-comp" ref="goodsListRef" v-if="loadGood" :list="category"
							:navbarHeight="navbarHeight" :bannerHeight="bannerHeight" :searchBoxHeight="searchBoxHeight"
							@handleGoodsIndex="handleGoodsIndex" @changeLeftTabChild="changeLeftTabChild"></food-good-list>
					</view>
				</view>
			</view>
		</view>
		<cart class="cart-box" @scrollToMustCate="scrollToMustCate"></cart>
	</view>
</template>

<script>
import {
	mapState,
	mapGetters
} from "vuex"; //引入mapState, mapGetters
import PageApi from "@/api/page"

export default {
	onPageScroll(e) {
		if (e.scrollTop >= this.bannerHeight) {
			this.$refs.goodsListRef.goodsIsScroll = true;
		} else {
			this.$refs.goodsListRef.goodsIsScroll = false;
		}
	},
	data() {
		return {
			isScroll: false,
			stickyContentHieght: 0,
			scrollViewHeight: 0,
			scrollIntoViewId: '',
			scrollTop: 0,
			navbarHeight: 0,
			leftScrollTop: 0,
			tabLeftId: '',
			loadGood: false,
			bannerHeight: 0, // banner 的高度
			searchBoxHeight: 0, // 搜索栏的高度
			cateClick: false,
			goodsWrapHeight: '',
			goodsHeight: [],
			tabsLeft: [], // tabs异步获取
			goods: [], //列表数据
			tabs: [{
				name: "全部",
				type: "xx"
			},
			{
				name: "奶粉",
				type: "xx"
			},
			{
				name: "图书",
				type: "xx"
			},
			],
			tabIndex: 0, // tab下标
		};
	},
	computed: {
		...mapState({
			scrollH: (state) => state.scrollH,
			cartHeight: (state) => state.cartHeight,
			winrate: (state) => state.winrate,
			goodsBanner: (state) => state.page.slideshow,
			category: (state) => state.page.category
		}),
		...mapGetters({
			stickyHeight: "getStickyHeight",
		}),
		// 分类的高度
		categoryHeight() {
			// 当前窗口的高度
			// const winInfo = uni.getWindowInfo()
			const winInfo = uni.getSystemInfoSync()
			//#ifdef MP-WEIXIN
			return winInfo.windowHeight - this.searchBoxHeight - this.cartHeight - 7
			//#endif
			//#ifdef MP-ALIPAY
			return winInfo.windowHeight - this.searchBoxHeight - this.cartHeight - 7 - 28
			//#endif
		}
	},
	onShow() {
		//#ifdef MP-ALIPAY
		my.hideBackHome
		//#endif
	},
	async mounted() {
		var that = this;
		//#ifdef MP-ALIPAY
		this.realBottom = 0;
		//#endif
		//#ifdef MP-WEIXIN
		this.realBottom = 0;
		//#endif
		this.headerHeight = 0;

		//#ifdef MP-WEIXIN
		this.navbarHeight = await this.getDomHeight('.navbar'); // 顶部导航高度
		this.bannerHeight = await this.getDomHeight('.banner'); // banner高度
		this.searchBoxHeight = await this.getDomHeight('.search-wrap'); // 搜索栏的高度
		this.scrollViewHeight = 'calc(100vh - ' + (this.navbarHeight + this.cartHeight) + 'px)';

		this.stickyContentHieght = 'calc(100vh - ' + (this.navbarHeight) + 'px)';

		//#endif

		//#ifdef MP-ALIPAY
		// banner 的高度
		my.createSelectorQuery().select('.banner').boundingClientRect().exec((ret) => {
			if (ret.length > 0) {
				let h = Math.floor(ret[0].height)
				that.bannerHeight = h;
			}
		})
		// 搜索栏的高度
		my.createSelectorQuery().select('.sticky-tabs').boundingClientRect().exec((ret) => {
			if (ret.length > 0) {
				let h = Math.floor(ret[0].height)
				that.searchBoxHeight = h
			}
		})
		//#endif

		// 底部cart的高度


		// 先进行登陆，登陆成功之后，获取首页列表
		// await authApi.authLogin()
		this.reloadPageData()
		// this.$nextTick(async () => {
		//   this.goodsHeight = await this.$refs.goodComp.getRect(this.realBottom);
		//   this.mescroll.scrollTo(this.goodsHeight[0] - 90 / this.winrate, 0);
		// });
		// 监听页面数据进行刷新
		const self = this
		uni.$on('reloadPageData', function (data) {
			self.reloadPageData()
		})
	},

	methods: {
		getDomHeight(domName) { // 获取dom的高度
			return new Promise((resolve, reject) => {
				var query = uni.createSelectorQuery().in(this);
				query.select(domName).boundingClientRect(data => {
					if (data.height) {
						resolve(data.height);
					} else {
						reject(false);
					}
				}).exec();
			})
		},
		changeLeftTabChild(sortId) {
			if (this.tabLeftId === sortId) return;
			this.tabLeftId = sortId;
		},
		hideBanner(sortId) {
			return new Promise((resolve, reject) => {
				this.$refs.goodsListRef.goodsIsScroll = true;
				this.$refs.goodsListRef.changeScroll(sortId);
				resolve(true);
			})
		},
		// 切换菜单
		async tabChange(sortId) {
			if (this.tabLeftId == sortId) return;
			this.tabLeftId = sortId;
			const isScroll = await this.hideBanner(sortId);
			if (isScroll) {
				uni.pageScrollTo({
					scrollTop: this.navbarHeight + this.bannerHeight,
					duration: 150
				});
			}
		},
		scrollToMustCate() {
			// 滚动到必选产品分类
			const index = _.findIndex(this.category, item => {
				return item.category_no == "1115"
			})
			this.mescroll.scrollTo(this.goodsHeight[index + 1], 0)
		},
		// 刷新页面数据
		reloadPageData() {
			const self = this;

			PageApi.getCustomBanner().then(banner => {
				self.$store.commit('page/setSlideshow', banner.data)
			})
			PageApi.pageList().then(pageRes => {
				if (pageRes.code == 200) {
					self.$store.commit('page/setCategory', pageRes.data.category)
					self.$store.commit('cart/setCartInfo', pageRes.data.cart_info)
					self.$store.commit('cart/setOrderInfo', pageRes.data.order_info)
					self.loadGood = true;
					self.tabLeftId = pageRes.data.category[0].category_no
				}
			})
		},
		goSearchPage() {
			uni.navigateTo({
				url: "/pages/search/search"
			});
		},
		touchStart(e) { }
	}
};
</script>

<style lang="scss" scoped>
.goods-page-wrapper {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-grow: initial;

	.page-main {
		display: flex;
		flex-direction: column;
	}

	.banner {
		flex: 0 0 360rpx;
		height: 360rpx;
		margin-top: 0;
		overflow: hidden;

		&.show-height {
			flex: 0 0 360rpx;
			height: 360rpx;
			transition: height 0.3s ease-in-out;
		}

		&.hide-height {
			flex: 0 0 0;
			height: 0;
			transition: height 0.3s ease-in-out;
		}
	}

	.cart-box {
		width: 100%;
		height: auto;
	}

	.sticky-content {
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		overflow-y: auto;

		.search-wrap {
			// position: sticky;
			background: #ffffff;
			z-index: 10;
			// top: 10px;
		}

		.left-warp {
			width: 180rpx;
			flex: 0 0 180rpx;
			background-color: #eee;
			border-right: 1rpx solid #eee;
			box-sizing: border-box;

			.tab-left-item {
				font-size: 28rpx;
				height: 128rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding: 0 32rpx;
				box-sizing: border-box;

				&.fixedCate {
					color: red;
				}

				&.active {
					background-color: #fff;
					color: #f9ae3d;
				}

				.tab-content {
					max-height: 80rpx;
					overflow: hidden;
					text-align: center;
				}


			}
		}

		.main-foods-box {
			height: 100%;
		}

	}
}

/* 左边 fixed定位*/
scroll-view ::-webkit-scrollbar {
	width: 0;
	height: 0;
	background-color: transparent;
}

.good-comp {
	flex: 1;
}

.sticky-tabs {
	height: 120rpx;
	flex: 0 0 120rpx;
	background-color: #fff;
	display: flex;
	border-bottom: 1rpx solid #f1f1f1;
}

.search-box {
	align-self: center;
}

.goods-wrapper {
	flex: 1;
	display: flex;
	flex-direction: row;
	overflow-y: auto;
	box-sizing: border-box;
	// position: sticky;
	// height: 100%;
}
</style>
<style>
page {
	height: 100%;
}
</style>